<template>
	<view class="">
		<view class="grid_1" v-for="item in 3" :key="item">
			<view class="grid_2">
				自然特征
			</view>
			<view class="grid_3">
				<view class="text-wrapper_4">
					<text lines="1" class="text_14">休眠用户</text>
				</view>
				<view class="text-wrapper_5">
					<text lines="1" class="text_15">明天生日</text>
				</view>
				<view class="text-wrapper_6">
					<text lines="1" class="text_16">很会来事，到场馆就跟前台吵</text>
				</view>
				<view class="tag_2">
					<text lines="1" class="text_17">是个眼眸发光的美女</text>
				</view>
				<view class="tag_3">
					<text lines="1" class="text_17">+标签</text>
				</view>
			</view>
		</view>
		<view class="btns flex-between">
			<u-button text="添加标签" shape="circle" @click="saveclick"
				color="linear-gradient(0deg, rgba(255,64,64,0.93), rgba(255,64,64,0.93), rgba(250,142,142,0.93));"
				size="large"></u-button>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {

			}
		},
		onLoad() {

		},
		methods: {
			saveclick() {
				uni.navigateTo({
					url:'./label_index'
				})
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	
		/deep/.u-button {
			&+.u-button {
				margin-left: 20rpx;
	
			}
		}
	}
	.grid_1 {
		width: 690rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0 12rpx 20rpx;
	}
	.grid_2 {
		width: 690rpx;
		height: 30rpx;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		margin: 20rpx 0 12rpx 10rpx;
	}
	.grid_3 {
		width: 690rpx;
		height: auto;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		margin: 20rpx 0 12rpx 10rpx;
	}

	.text-wrapper_4 {
		background-color: rgba(255, 160, 0, 0.2);
		border-radius: 15rpx;
		height: 64rpx;
		display: flex;
		flex-direction: column;
		width: 140rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.text_14 {
		width: 101rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(255, 160, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 19rpx 0 0 20rpx;
	}

	.text-wrapper_5 {
		background-color: rgba(99, 124, 255, 0.2);
		border-radius: 15rpx;
		height: 64rpx;
		display: flex;
		flex-direction: column;
		width: 140rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.text_15 {
		width: 98rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(99, 124, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 19rpx 0 0 21rpx;
	}

	.text-wrapper_6 {
		background-color: rgba(255, 123, 90, 0.2);
		border-radius: 15rpx;
		height: 64rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		width: 370rpx;
	}

	.text_16 {
		width: 336rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(255, 123, 90, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 19rpx 0 0 18rpx;
	}

	.tag_2 {
		background-color: rgba(138, 114, 255, 0.2);
		border-radius: 15rpx;
		height: 64rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		width: 271rpx;
	}
	.tag_3 {
		background-color: #EFEFEF;
		border-radius: 15rpx;
		height: 64rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		width: 140rpx;
	}

	.text_17 {
		width: 233rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(138, 114, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 19rpx 0 0 19rpx;
	}
</style>